<script>
export default {
  name: "swiperImage",
};
</script>
<script setup>
import { ref, defineProps } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Autoplay } from "swiper";

defineProps({
  carouselList: {
    type: Array,
    default: () => [
      {
        img: new URL("@/assets/1.png", import.meta.url).href,
        index: 0,
      },
      {
        img: new URL("@/assets/2.png", import.meta.url).href,
        index: 1,
      },
      {
        img: new URL("@/assets/3.png", import.meta.url).href,
        index: 2,
      },
      {
        img: new URL("@/assets/map.png", import.meta.url).href,
        index: 3,
      },
    ],
  },
});

const selectMonitorItem = (obj) => {
  activeCarouseIndex.value = obj.realIndex;
};
const onSwiper = (swiper) => {
  swiperRef.value = swiper;
};

const activeCarouseIndex = ref(0);

const carouseItemClick = (index) => {
  if (swiperRef.value) {
    swiperRef.value.slideTo(index + 1);
  }
};

const swiperRef = ref();
</script>

<template>
  <div class="box">
    <div class="swiperBox">
      <Swiper
        ref="swiperRef"
        trigger="click"
        :loop="true"
        :modules="[Navigation, Pagination, Autoplay]"
        pagination
        @slideChange="selectMonitorItem"
        @swiper="onSwiper"
        class="swiper-container"
        :space-between="30"
        :autoplay="{
          delay: 2500, // 轮播间隔(ms)
          disableOnInteraction: false, // 用户操作后不停止
          pauseOnMouseEnter: true, // 鼠标悬停时暂停（可选）
          enable: true, // 显式启用自动播放
        }"
      >
        <SwiperSlide v-for="item in carouselList" :key="item.index">
          <el-image
            style="width: 100%; height: 100%"
            :src="item.img"
            :z-index="999999"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            fit="cover"
          />
        </SwiperSlide>
      </Swiper>
    </div>
    <div class="carouseItems">
      <el-scrollbar height="100%" style="width: 100%">
        <div class="carouseItemBox">
          <div
            class="carouseItem"
            :class="[{ activeCarouseIndex: item.index === activeCarouseIndex }]"
            v-for="item in carouselList"
            :key="item.index"
            @click="carouseItemClick(item.index)"
          >
            <el-image
              style="width: 100%; height: 100%"
              :src="item.img"
              :z-index="999999"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              fit="cover"
            />
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="less">
.box {
  height: calc(100% - 46px);
  width: 100%;

  > .swiperBox {
    width: 100%;
    height: calc(100% - 110px);

    :deep(.swiper-container) {
      height: 100%;
    }
  }

  > .carouseItems {
    height: 110px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

    .carouseItemBox {
      height: 110px;
      display: flex;
      padding: 6px 2px 6px 2px;
      justify-content: flex-start;

      > .carouseItem {
        width: 30%;
        height: 100%;
        flex-shrink: 0;
        margin-left: 2px;
        margin-right: 2px;
        cursor: pointer;
        border: 1px solid transparent;
      }

      > .carouseItem.activeCarouseIndex {
        border: 4px solid rgba(0, 133, 254, 1);
      }
    }
  }
}
</style>
